<template>
    <div class="flex flex-col gap-2 p-8">
        <div class="flex flex-row justify-between items-center mb-4">
            <div class="text-lg font-semibold text-black-100">书籍
                <span class="text-sm">列表</span>
            </div>

            <div class="flex flex-row items-center gap-2">
                <n-button type="primary" class="text-black" size="small" @click="createBookPage">新增书籍</n-button>
                <n-button type="primary" class="text-black" size="small" @click="show = true">新增分类</n-button>
            </div>
        </div>
        <div class="flex flex-row gap-1">
            <n-form-item label="书籍名称">
                <n-input v-model:value="query.name" placeholder="书籍名称" :clearable="true"></n-input>
            </n-form-item>
            <n-form-item label="作者">
                <n-input v-model:value="query.author" placeholder="作者" :clearable="true"></n-input>
            </n-form-item>
            <n-form-item label="选择类型">
                <n-select class="w-48" v-model:value="query.category_id" :clearable="true" placeholder="选择类型"  :options="categories" label-field="name" value-field="id"/>
            </n-form-item>
            <n-form-item>
                <n-button type="primary" class="text-black" @click="search()">搜索</n-button>
            </n-form-item>
        </div>
        <n-data-table :columns="columns" :data="data" :pagination="pagination" />
    </div>

    <n-modal v-model:show="show" preset="dialog" title="添加分类">
        <template #header>
            <div>添加分类</div>
        </template>
        <n-form class="bg-gray-50 p-8 rounded-lg" ref="formRef" :label-width="80" :model="formValue" :rules="rules"
            size="small">
            <n-form-item label="名称" path="name">
                <n-input v-model:value="formValue.name" placeholder="输入名称" />
            </n-form-item>
        </n-form>
        <template #action>
            <div>
                <n-button attr-type="button" @click="handleValidateClick">
                    提交
                </n-button>
            </div>
        </template>
    </n-modal>
</template>

<script setup>
import { defineComponent, reactive, onMounted } from "vue";
import { useRoute, useRouter } from 'vue-router'
import { GetBooks, CreateCategory, GetCategories } from "../../wailsjs/go/main/App.js"
import { useMessage } from "naive-ui";
import { EventsOn } from "../../wailsjs/runtime/runtime.js"

const message = useMessage();
const show = ref(false)
const formRef = ref(null)
const formValue = ref({ name: "" })

const rules = {
    name: {
        required: true,
        message: "请输入名称",
        trigger: "blur"
    },
}

const query = ref({
    name: "",
    author: "",
    category_id: ""
})

const handleValidateClick = (e) => {
    e.preventDefault();
    formRef.value?.validate((errors) => {
        if (!errors) {
            CreateCategory(formValue.value.name).then(res => {
                message.success("添加成功");
                show.value = false;
            })
        } else {
            console.log(errors);
            message.error("Invalid");
        }
    });
}
const columns = [
    {
        title: "ID",
        key: "id"
    },
    {
        title: "书籍名称",
        key: "name"
    },
    {
        title: "作者",
        key: "author"
    },
    {
        title: "类型",
        key: "category.name"
    },
    {
        title: "出版日期",
        key: "publication_year"
    },
    {
        title: "剩余数量",
        key: "available",
    }
];

onMounted(() => {
    GetBooks("", "", 0, false).then(res => {
        data.value = res
        console.log(res)
    })
    GetCategories().then(res => {
        categories.value = res
    })
})

const search = () => {
    GetBooks(query.value.name, query.value.author, Number(query.value.category_id), false).then(res => {
        data.value = res
    })
}

const categories = ref([])
const data = ref([])


const pagination = reactive({
    page: 1,
    pageSize: 5,
    showSizePicker: true,
    pageSizes: [3, 5, 7],
    onChange: (page) => {
        pagination.page = page;
    },
    onUpdatePageSize: (pageSize) => {
        pagination.pageSize = pageSize;
        pagination.page = 1;
    }
});
const router = useRouter()

const createBookPage = () => {
    router.push({ name: "create_book" })
}
</script>